<template>
	<view>
		<uni-section title="行业牛人" @click="onLink('/pages/club/border/border',0)">
			<template v-slot:right>更多牛人 ></template>
		</uni-section>
		<uni-grid :column="3" :show-border="false" :square="false" @change="changeBorder">
			<uni-grid-item v-for="(item ,index) in teacherInfo" :index="index" :key="index">
				<view class="p15 text-center">
					<view><image class="head-image" :src="item.img" mode="widthFix" /></view>
					<view class="p8-0"><b>{{item.name}}</b></view>
					<view class="text-left"><text class="brief">{{item.synopsis}}</text></view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-section title="同行加入"></uni-section>
		<uni-grid :column="4" :show-border="false" :square="false" @change="change">
			<uni-grid-item v-for="(item ,index) in userInfo" :index="index" :key="index">
				<view class="p15 text-center">
					<view class="text-center"><image class="user-image" :src="item.head_img" mode="aspectFill" /></view>
					<view class="mt5 line-clamp1 text-center"><b>{{item.name}}</b></view>
					<view class="text-left line-clamp2"><text class="brief">{{item.des ? item.des : 'TA很懒,什么也没有留下'}}</text></view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-load-more :status="status" />
		
		<view class="fixed-bottom">
			<uni-goods-nav v-show="!showCommon" :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
		
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
	</view>
</template>

<script>
	import customerVue from '../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				options: [{
					icon: 'paperplane',
					text: '咨询',
					type:'paperplane',
				}],
				customButtonGroup: [{ icon: 'shop',text: '同行加入', backgroundColor: '#FFD101', color: '#333' }],
				form:{page:0,skill:0,sort:2,is_join:1,pass:1},
				loadData : {user:true},
				teacherInfo:[],
				userInfo:[],
				status:'more',
			}
		},
		onShow() {
			this.onGetBrother()
			// api2/brother/45 同行信息
		},
		methods: {
			onGetBrother(){
				let _this = this
				this.$request_api('applet_api/border','POST',{limit:18}).then(res => {
					_this.teacherInfo = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onGetUser(){
				this.status = 'loading'
				if(!this.loadData.user){
					this.status = 'no-more'
					return false;
				}
				let _this = this
				this.$request_api('applet_api/user/list','POST',this.form).then(res => {
					if(res.data.length == 0){
						_this.loadData.user = false
						_this.status = 'no-more'
					}
					_this.userInfo.push(...res.data) 
				}).catch(err => {
					console.log(err)
				})
			},
			onReachBottom() {
				this.form.page = this.form.page + 1
				this.onGetUser()
			},
			onClickItem(e){
				this.current = e.currentIndex
			},
			changeBorder(e){
				let id = this.teacherInfo[e.detail.index].id
				uni.navigateTo({
					url: "/pages/user_info/user_info?type=border&id="+id
				});
			},
			change(e){
				let id = this.userInfo[e.detail.index].id
				this.$func.onLink('/pages/user_info/user_info',id)
			},
			onClick(e) {
				if(e.content.type == 'paperplane'){
					this.$refs.popupCustomer.open('center')
				}
			},
			buttonClick(e) {
				uni.navigateTo({
					url: "/user/edit/edit"
				});
			},
			onLink(url){
				this.$func.onLink(url,0)
			}
		}
	}
</script>

<style scoped lang="scss">
	.img{width: 40%;}
	.head-image{border-radius: 50%;width: 100%;}
	.user-image{width: 60px;height: 60px;border-radius: 60px;}
	.brief{font-size: .6rem;}
	.recurit{border-bottom: 1px solid #EEE;}
</style>
